<template>
  <div class="smart-tile-monitoring">
    <!-- 嵌入 HTML 内容的 iframe -->
    <iframe 
      ref="htmlFrame"
      :src="htmlSrc" 
      frameborder="0"
      width="100%"
      height="100%"
      class="html-frame"
    ></iframe>
  </div>
</template>

<script>
export default {
  name: 'SmartTileMonitoring',
  data() {
    return {
      htmlSrc: '/src/html/smart-tile-monitoring.html'
    }
  },
  
  mounted() {
    // 根据路由参数调整页面状态
    this.handleRouteChange()
  },
  
  watch: {
    '$route'() {
      this.handleRouteChange()
    }
  },
  
  methods: {
    handleRouteChange() {
      const activeSection = this.$route.meta.activeSection
      if (activeSection && this.$refs.htmlFrame) {
        // 可以通过 postMessage 与 iframe 通信
        this.$nextTick(() => {
          const iframe = this.$refs.htmlFrame
          if (iframe.contentWindow) {
            iframe.contentWindow.postMessage({
              type: 'ROUTE_CHANGE',
              activeSection: activeSection
            }, '*')
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.smart-tile-monitoring {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.html-frame {
  width: 100%;
  height: 100%;
  border: none;
  min-width: 1440px;
}
</style>